<template>
  <div class="PreferentialRelief  h100" v-loading="loading">
    <div class="PageContent">
      <el-form :model="ruleForm" :inline="true" ref="ruleForm" label-width="80px" class="PageItem margintop20">
        <el-row :gutter="5" class="fileSearch">
          <el-form-item label="业务编码:">
            <el-input v-model="ruleForm.businessCode"></el-input>
          </el-form-item>
          <el-form-item label="减免区域:" prop="name">
            <el-select v-model="ruleForm.benefitDistrictCode" placeholder="请选择">
              <el-option label="全部" value="-1"></el-option>
              <el-option
                v-for="item in dictionary.huimin_region"
                :key="item.dataCode"
                :label="item.dataText"
                :value="item.dataCode"/>
            </el-select>
          </el-form-item>
          <el-form-item label="减免类型:" prop="name">
            <el-select v-model="ruleForm.exemptionTypeCode" onkeydown="return (event.keyCode!=8)" placeholder="请选择">
              <el-option label="全部" value="-1"></el-option>
              <el-option
                v-for="item in dictionary.exemption_type"
                :key="item.dataCode"
                :label="item.dataText"
                :value="item.dataCode"/>
            </el-select>
          </el-form-item>
          <el-form-item label="火化预约日期:" prop="name" label-width="120px">
            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.appointmentDateStart"
                            format="yyyy-MM-dd"></el-date-picker>
            -
            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.appointmentDateEnd"
                            format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" v-if="btnRight.btnPreferentialReliefSearch" @click="onSubmit('search')">查询</el-button>
            <el-button type="primary" plain v-if="btnRight.btnPreferentialReliefExport" @click="openExecl">导出Excel</el-button>
          </el-form-item>
        </el-row>
        <el-table
          :data="tableData"
          :header-cell-style="{background:'rgb(246,247,251)',color:'#606266'}"
          stripe
          border
          :height="tableHeight">
          <el-table-column align='center' prop="businessCode" label="业务编码" width="200">
          </el-table-column>
          <el-table-column
            prop="deadName"
            align='center'
            label="逝者姓名"
            width="100">
          </el-table-column>
          <el-table-column
            prop="deadGender"
            align='center'
            label="逝者性别"
            width="120">
          </el-table-column>
          <el-table-column
            prop="deadAge"
            align='center'
            label="逝者年龄"
            width="100">
          </el-table-column>
          <el-table-column
            prop="certificateNo"
            align='center'
            label="证件号码"
            width="200">
          </el-table-column>
          <el-table-column
            prop="benefitDistrict"
            align='center'
            label="减免区域"
            width="200">
          </el-table-column>
          <el-table-column
            prop="exemptionType"
            align='center'
            label="减免类型"
            width="100">
          </el-table-column>
          <el-table-column
            prop="discountCharge"
            align='center'
            label="优惠金额"
            width="100">
          </el-table-column>
          <el-table-column
            prop="benefitCharge"
            align='center'
            label="减免金额"
            width="100">
          </el-table-column>
          <el-table-column
            prop="householdRegistrationPlace"
            align='center'
            label="逝者户籍地"
            width="200">
          </el-table-column>
          <el-table-column
            prop="appointmentDate"
            align='center'
            label="火化预约日期"
            width="200">
          </el-table-column>
        </el-table>
        <p style="text-align: right;margin-top: 20px;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pager.currentPage"
            :page-size="pager.pageSize"
            background
            layout="prev, pager, next, jumper"
            :total="pager.total">
          </el-pagination>
        </p>
      </el-form>
    </div>
  </div>
</template>

<script>
    import * as Type from '@/api/service'
    import {dataFormatetmd} from '@/utils/index'
    import download from "@/api/download"

    export default {
        name: "PreferentialRelief",
        data() {
            return {
              loading:false,
                type: [],
                ruleForm: {
                    "businessCode": "",
                    "benefitDistrictCode": "-1",
                    "exemptionTypeCode": "-1",
                    "appointmentDateStart": "",
                    "appointmentDateEnd": "",
                    "pageSize": 0,
                    "currentPage": 0,
                    "exportExcelFlag": 0,
                    "orderField": "",
                    "orderType": ""
                },
                pager: {
                    "pageSize": 20,
                    "total": 1,
                    "currentPage": 1
                },
                tableHeight:0,
                tableData: [],
                dictionary: {},
                //按钮权限
                btnRight: {
                  btnPreferentialReliefSearch: true, //查询
                  btnPreferentialReliefExport: true,//导出excel
               }
            }

        },
        mounted() {
            //按钮权限
            this.btnRight = this.$route.meta.buttons;
            //遍历属性赋值将true与false字符串转换成布尔型的值
            for (var key of Object.keys(this.btnRight)) {
              this.btnRight[key]=(this.btnRight[key]|| this.btnRight[key]=="true")?true:false;
            }
            this.$store.dispatch('user/getdictionary').then((res) => {     //获取字典数据
                this.dictionary = res;
                this.$set(this.dictionary, res)
            }).catch(()=>console.log('promise catch err'))
          this.onSubmit()
          var that=this
          window.onresize=function() {
            var search = document.getElementsByClassName("fileSearch")[0].offsetHeight
            var dom = document.getElementsByClassName("PageContent")[0].offsetHeight
            that.tableHeight =dom - search - 110
          }
        },
        //注销window.onresize事件
        destroyed(){
          window.onresize = null;
        },
        updated(){
          this.$nextTick(()=>{
            var dom = document.getElementsByClassName("PageContent")[0].offsetHeight
            var search = document.getElementsByClassName("fileSearch")[0].offsetHeight
            this.tableHeight =dom - search - 110
          })
        },
        methods: {
            onSubmit(value) {
              this.loading=true
              if (value) {
                this.pager.currentPage = 1;
              }
              var postData = {
                    "businessCode": this.ruleForm.businessCode,
                    "benefitDistrictCode": this.ruleForm.benefitDistrictCode,
                    "exemptionTypeCode": this.ruleForm.exemptionTypeCode,
                    "appointmentDateStart": dataFormatetmd(new Date(this.ruleForm.appointmentDateStart)),
                    "appointmentDateEnd": dataFormatetmd(new Date(this.ruleForm.appointmentDateEnd)),
                    "pageSize": this.pager.pageSize,
                    "currentPage": this.pager.currentPage,
                    "exportExcelFlag": 0,            //0表示显示 1表示导出execl
                    "orderField	": "",     //排序字段
                    "orderType": ""        //排序顺序
                }
                //查询接口
                Type['loadHuiminReduction'](postData).then(response => {
                    const {data} = response;
                    if (!data) {
                      this.loading = false;
                        this.$message('数据读取失败')
                        return
                    }
                    this.tableData = data.list
                    this.pager = data.pager
                    this.loading=false
                    //   //数据读取成功
                }).catch(error => {
                    this.$message(error)
                    this.loading=false
                    this.tableData = []
                })
            },
            // 初始页currentPage、初始每页数据数pagesize和数据data
            handleSizeChange: function (size) {
                this.pager.pagesize = size;
                alert(pagesize)  //每页下拉显示数据
            },
            handleCurrentChange: function (currentPage) {
                this.pager.currentPage = currentPage;
                this.onSubmit()  //点击第几页
            },
            openExecl() {
                // window.location.href = "excel地址"
              var postData = {
                    "businessCode": this.ruleForm.businessCode,
                    "deadName": this.ruleForm.deadName,
                    "itemName": this.ruleForm.itemName,
                    "settleTimeStart": dataFormatetmd(new Date(this.ruleForm.settleTimeStart)),
                    "settleTimeEnd": dataFormatetmd(new Date(this.ruleForm.settleTimeEnd)),
                    "gmtCreateStart": dataFormatetmd(new Date(this.ruleForm.gmtCreateStart)),
                    "gmtCreateEnd": dataFormatetmd(new Date(this.ruleForm.gmtCreateEnd)),
                    "pageSize": this.pager.pageSize,
                    "currentPage": this.pager.currentPage,
                    "exportExcelFlag": 1,            //0表示显示 1表示导出execl
                    "orderField	": "",     //排序字段
                    "orderType": ""        //排序顺序
                }
              download.exportExcel(Type["HuiminReductionEXPEXC"], postData, "优惠减免_" + download.getDateTime() + ".xlsx");
            },
        }
    }
</script>

<style scoped>

</style>
